import { getInstanceByDom, init } from "echarts";
import { useRef, useEffect, useState } from "react";

const GaugeChart = () => {
    // 放置图表的元素
    const chartRef = useRef(null);
    // 时间记录
    const date = new Date();
    const [time, setTime] = useState({ hour: date.getHours() % 12, minute: date.getMinutes(), second: date.getSeconds() });

    // 初始化图表
    useEffect(() => {
        const myChart = init(chartRef.current);
        // 开始观察
        const observer = new ResizeObserver(() => myChart?.resize());
        observer.observe(chartRef.current!);
        // 结束观察，清理图表
        return () => {
            observer.disconnect();
            myChart.dispose();
        };
    }, []);

    // 更新图表
    useEffect(() => {
        // 获取实例
        const myChart = getInstanceByDom(chartRef.current!);
        // 开始计时
        const timer = setInterval(() => {
            const date = new Date();
            setTime({ hour: date.getHours() % 12, minute: date.getMinutes(), second: date.getSeconds() });
        }, 50);
        // 准备图表参数
        const option = {
            series: [
                {
                    name: 'hour',
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    min: 0,
                    max: 12,
                    splitNumber: 12,
                    clockwise: true,
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [[1, 'rgba(0,0,0,0.7)']],
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 15
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 3,
                            shadowOffsetX: 1,
                            shadowOffsetY: 2
                        }
                    },
                    axisLabel: {
                        fontSize: 24,
                        distance: 20,
                        formatter: function (value: number) {
                            return value ? `${value}` : '';
                        }
                    },
                    pointer: {
                        icon:
                            'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                        width: 12,
                        length: '55%',
                        offsetCenter: [0, '8%'],
                        itemStyle: {
                            color: '#C0911F',
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 4
                        }
                    },
                    detail: {
                        show: false
                    },
                    title: {
                        offsetCenter: [0, '30%']
                    },
                    data: [
                        {
                            value: time.hour
                        }
                    ]
                },
                {
                    name: 'minute',
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    min: 0,
                    max: 60,
                    clockwise: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        icon:
                            'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                        width: 8,
                        length: '70%',
                        offsetCenter: [0, '8%'],
                        itemStyle: {
                            color: '#C0911F',
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 4
                        }
                    },
                    anchor: {
                        show: true,
                        size: 20,
                        showAbove: false,
                        itemStyle: {
                            borderWidth: 15,
                            borderColor: '#C0911F',
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 4
                        }
                    },
                    detail: {
                        show: false
                    },
                    title: {
                        offsetCenter: ['0%', '-40%']
                    },
                    data: [
                        {
                            value: time.minute
                        }
                    ]
                },
                {
                    name: 'second',
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    min: 0,
                    max: 60,
                    animationEasingUpdate: 'bounceOut',
                    clockwise: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        icon:
                            'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                        width: 4,
                        length: '85%',
                        offsetCenter: [0, '8%'],
                        itemStyle: {
                            color: '#C0911F',
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 4
                        }
                    },
                    anchor: {
                        show: true,
                        size: 15,
                        showAbove: true,
                        itemStyle: {
                            color: '#C0911F',
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 8,
                            shadowOffsetX: 2,
                            shadowOffsetY: 4
                        }
                    },
                    detail: {
                        show: false
                    },
                    title: {
                        offsetCenter: ['0%', '-40%']
                    },
                    data: [
                        {
                            value: time.second
                        }
                    ]
                }
            ]
        };
        // 渲染参数
        myChart?.setOption(option);
        // 结束计时
        return () => {
            clearInterval(timer);
        };
    }, [time]);

    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
    );
};
export default GaugeChart;